<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
import { createOrderApi, orderPayApi, preOrderApi } from '@/apis/consult'
import { patientDetailApi } from '@/apis/patient';
import { useConsultStore } from '@/stores/consult'
import type { OrderPreData } from '@/types/consult'
import type { PatientItem } from '@/types/patient';
import { ref } from 'vue'

// 1. 创建 预支付订单
const store = useConsultStore()
// 保存服务器返回的 预支付订单信息
const payMentInfo = ref({} as OrderPreData)
const createPreOrder = async () => {
  const res = await preOrderApi({
    // 问诊类型
    type: store.type,
    // 普通 还是 三甲
    illnessType: store.illnessType,
  })
  // console.log('res:', res)
  payMentInfo.value = res
}
createPreOrder()

//2, 患者信息
const patientDetail = ref({} as PatientItem)
const getPatientDetail = async ()=>{
  const res = await patientDetailApi(store.patientId)
  // console.log(res)
  patientDetail.value= res as PatientItem
}

getPatientDetail()

// 3. 生成订单
const orderId = ref('')

// 绑定弹框组件
const paymentPop = ref()

const onPaymentButtonClick=async ()=>{
  if (orderId.value !='') {
    uni.showToast({
      title:'不要重复创建订单'
    })
    return
  }
  const res = await createOrderApi({
    // 直接保存在仓库中的信息
    type: store.type,
    illnessType: store.illnessType,
    patientId: store.patientId,
    depId: store.depId,
    // 保存在仓库 illnessInfo 中的信息
    illnessDesc: store.illnessInfo.illnessDesc,
    illnessTime: store.illnessInfo.illnessTime,
    consultFlag: store.illnessInfo.consultFlag,
    pictures: store.illnessInfo.pictures,
  })
  // console.log(res)
  // 保存 订单的 id
  orderId.value = res.id
 // 清空 pinia 中的 病情相关数据
 store.clear()


 paymentPop.value.open()
}


// 关闭事件
const onClose = async() => {
  // 可以添加一些自定义的逻辑，比如询问用户是否需要关闭弹窗
 // { confirm }  对象的结构，获取=之后对象的特定属性(ArkTS中用不了)
  // 如果属性在对象上不存在，获取到的是 undefined
  const { confirm, cancel, errMsg, key } = await uni.showModal({
    // const res = await uni.showModal({
    title: '关闭支付',
    content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
    cancelText: '仍要关闭',
    cancelColor: '#848484',
    confirmText: '继续支付',
    confirmColor: '#16C2A3',
  })

  // 用户执意要关闭，关闭刚刚打开的一系列页面，返回首页
  // 用户点击 继续支付什么都不用做
  // console.log(confirm)
  // console.log(cancel)
  // console.log(errMsg)
  // console.log(key)
  // if (confirm == false) {
  // confirm false !confirm ->true
  if (!confirm) {
    // 用户取消支付
    // 操纵弹框关闭
    paymentPop.value.close()
    // 去首页(关闭其他页面去首页)
    uni.reLaunch({
      url: '/pages/index/index',
    })
  }
}

const onConfirm =async (index: number) => {
  console.log('子组件点击了立即支付:', index)
  if (index == 0) {
    uni.showToast({
      title: '微信支付暂不支持',
    })
    return
  }
  // 走支付宝支付
  const res = await orderPayApi({
    orderId: orderId.value,
    payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
    // 字符类型
    paymentMethod: index + '',
  })
  // console.log('res:', res)
  // 页面 跳转到 服务器返回的支付地址，完成支付，
  // 根据传递的 callBack地址，返回到对应的 url
  window.location.href = res.payUrl
}
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" :title="`图文问诊 ${payMentInfo.payment || 0}元`">
        <uni-list :border="false">
          <uni-list-item title="极速问诊" note="自动分配医生" thumb="/static/uploads/doctor-avatar.jpg" thumb-size="lg" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${payMentInfo.couponDeduction || 0}.00`" />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ payMentInfo.pointDeduction }}.00</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ payMentInfo.actualPayment }}.00</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray"> {{ patientDetail.name }} | {{ patientDetail.genderValue }} | {{ patientDetail.age }}岁 </view>
            </template>
          </uni-list-item>
           <!-- 数据 存储的位置，取决于数据需要用的地方,用的范围
            当前页面：状态
            多个页面：统一的数据仓库
            多个设备：服务器 
          -->
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount"> 合计: <text class="number">¥39.00</text> </view>
      <button @click="onPaymentButtonClick"  class="uni-button">立即支付</button>
    </view>
  </scroll-page>
   <!-- :orderId="orderId"  :是 v-bind  后面等号跟着的代码表示表达式，如果没有：等号跟着的代码表示赋值-->
  <custom-payment :orderId="orderId" :amount="payMentInfo.actualPayment"  @close="onClose" @confirm="onConfirm" ref="paymentPop" />
</template>

<style lang="scss">
@import './index.scss';
</style>
